<clr-wizard #wizard [(clrWizardOpen)]="opened" [clrWizardClosable]="false" (clrWizardOnCancel)="onCancel()">
    <clr-wizard-title>{{'APP_CREATE_REGION'|translate}}</clr-wizard-title>
    <clr-wizard-button [type]="'cancel'">{{'APP_CANCEL'|translate}}</clr-wizard-button>
    <clr-wizard-button [type]="'previous'">{{'APP_BACK'|translate}}</clr-wizard-button>
    <clr-wizard-button [type]="'next'">{{'APP_NEXT'|translate}}</clr-wizard-button>
    <clr-wizard-button [type]="'finish'">{{'APP_FINISH'|translate}}</clr-wizard-button>

    <clr-wizard-page [clrWizardPageNextDisabled]="regionForm.invalid">
        <ng-template clrPageTitle>{{'APP_BASIC_INFORMATION'|translate}}</ng-template>
        <form clrForm #regionForm="ngForm">
            <clr-input-container>
                <label>{{'APP_NAME'|translate}}</label>
                <input clrInput size=45 type="text" maxlength="15" [(ngModel)]="item.name"
                       name="name" required>
                <!--                <clr-control-error *ngIf="nameCtrl&&nameCtrl.errors&&nameCtrl.errors.required">此字段为必填项</clr-control-error>-->
                <!--                <clr-control-error *ngIf="nameCtrl&&nameCtrl.errors&&nameCtrl.errors.repeat">名称重复</clr-control-error>-->
                <!--                <clr-control-error *ngIf="nameCtrl&&nameCtrl.errors&&nameCtrl.invalid">{{name_pattern_tip}}</clr-control-error>-->
                <!--                <clr-control-helper>{{name_pattern_tip}}</clr-control-helper>-->
            </clr-input-container>
            <clr-select-container>
                <label>{{'APP_PROVIDER'|translate}}</label>
                <select clrSelect [(ngModel)]="item.provider" name="provider" required>
                    <option value=''>{{'APP_DEFAULT_OPTION'|translate}}</option>
                    <option *ngFor="let template of cloudProviders" [value]="template">{{template}}</option>
                </select>
            </clr-select-container>
        </form>
    </clr-wizard-page>
    <clr-wizard-page [clrWizardPageNextDisabled]="paramsForm.invalid || !isParamsValid">
        <ng-template clrPageTitle>{{'APP_REGION_PARAM_CONFIG'|translate}}</ng-template>
        <form clrForm #paramsForm='ngForm'>
            <div *ngIf="item.provider === 'vSphere'">
                <clr-input-container>
                    <label>{{'APP_REGION_VCENTER_HOST'|translate}}</label>
                    <input clrInput size=45 type="text" [(ngModel)]="item.regionVars['host']" name="vcHost" required>
                    <clr-control-error>{{'APP_REQUIRED_ERROR'|translate}}</clr-control-error>
                    <clr-control-helper>{{'APP_REGION_VCENTER_API'|translate}}</clr-control-helper>
                </clr-input-container>
                <clr-input-container>
                    <label>{{'APP_REGION_VCENTER_PORT'|translate}}</label>
                    <input clrInput size=45 type="number" [(ngModel)]="item.regionVars['port']" name="vcPort"
                           required>
                    <clr-control-error>{{'APP_REQUIRED_ERROR'|translate}}</clr-control-error>
                    <clr-control-helper>{{'APP_REGION_VCENTER_PORT_HELP'|translate}}</clr-control-helper>
                </clr-input-container>
                <clr-input-container>
                    <label>{{'APP_USERNAME'|translate}}</label>
                    <input clrInput size=45 type="text" [(ngModel)]="item.regionVars['username']" name="vcUsername"
                           required>
                    <clr-control-error>{{'APP_REQUIRED_ERROR'|translate}}</clr-control-error>
                    <clr-control-helper>{{'APP_REGION_VCENTER_USER_HELP'|translate}}</clr-control-helper>
                </clr-input-container>
                <clr-password-container>
                    <label>{{'APP_PASSWORD'|translate}}</label>
                    <input clrPassword size=45 type="password" [(ngModel)]="item.regionVars['password']"
                           name="vcPassword"
                           required>
                    <clr-control-error>{{'APP_REQUIRED_ERROR'|translate}}</clr-control-error>
                    <clr-control-helper>{{'APP_REGION_VCENTER_PASSWORD_HELP'|translate}}</clr-control-helper>
                </clr-password-container>
                <button class="btn" [disabled]="paramsForm.invalid || isParamsCheckGoing" (click)="onCheckParams()">
                    <i *ngIf="isParamsCheckGoing" class="fa fa-spinner fa-pulse"></i>
                    {{'APP_REGION_VCENTER_CHECK'|translate}}
                </button>
                <br>
                <span *ngIf="isParamsValid&&!isParamsCheckGoing&&paramsForm.valid"
                      style="color: #859900;"> {{'APP_REGION_VCENTER_PARAM_VALID'|translate}}</span>
                <span *ngIf="isParamsValid==false&&!isParamsCheckGoing&&paramsForm.valid"
                      style="color: #e02200;"> {{'APP_REGION_VCENTER_PARAM_INVALID'|translate}}</span>
            </div>
            <div *ngIf="item.provider === 'OpenStack'">
                <clr-input-container>
                    <label>{{'APP_OPENSTACK_ID'|translate}}</label>
                    <input clrInput type="text" [(ngModel)]="item.regionVars['identity']" name="identity"
                           required>
                    <clr-control-error>{{'APP_REQUIRED_ERROR'|translate}}</clr-control-error>
                    <clr-control-helper>{{'APP_OPENSTACK_KEYSTONE'|translate}}</clr-control-helper>
                </clr-input-container>
                <clr-input-container>
                    <label>{{'APP_USERNAME'|translate}}</label>
                    <input clrInput type="text" [(ngModel)]="item.regionVars['username']" name="openstack_username"
                           required>
                    <clr-control-error>{{'APP_REQUIRED_ERROR'|translate}}</clr-control-error>
                    <clr-control-helper>{{'APP_OPENSTACK_USERNAME'|translate}}</clr-control-helper>
                </clr-input-container>
                <clr-password-container>
                    <label>{{'APP_PASSWORD'|translate}}</label>
                    <input clrPassword type="text" [(ngModel)]="item.regionVars['password']" name="openstack_password"
                           required>
                    <clr-control-error>{{'APP_REQUIRED_ERROR'|translate}}</clr-control-error>
                    <clr-control-helper>{{'APP_OPENSTACK_PASSWORD'|translate}}</clr-control-helper>
                </clr-password-container>
                <clr-input-container>
                    <label>{{'APP_OPENSTACK_PROJECT'|translate}}</label>
                    <input clrInput type="text" [(ngModel)]="item.regionVars['projectId']" name="projectId"
                           required>
                    <clr-control-error>{{'APP_REQUIRED_ERROR'|translate}}</clr-control-error>
                    <clr-control-helper>{{'APP_OPENSTACK_PROJECT_HELPER'|translate}}</clr-control-helper>
                </clr-input-container>
                <clr-input-container>
                    <label>{{'APP_OPENSTACK_DOMAIN'|translate}}</label>
                    <input clrInput type="text" [(ngModel)]="item.regionVars['domainName']" name="domainName"
                           required>
                    <clr-control-error>{{'APP_REQUIRED_ERROR'|translate}}</clr-control-error>
                    <clr-control-helper>{{'APP_OPENSTACK_DOMAIN_HELPER'|translate}}</clr-control-helper>
                </clr-input-container>
                <button class="btn" [disabled]="isParamsCheckGoing || paramsForm.invalid" (click)="onCheckParams()">
                    <i *ngIf="isParamsCheckGoing" class="fa fa-spinner fa-pulse"></i>
                    {{'APP_REGION_VCENTER_CHECK'|translate}}
                </button>
                <span *ngIf="isParamsValid&&!isParamsCheckGoing&&paramsForm.valid"
                      style="color: #859900;"> {{'APP_REGION_VCENTER_PARAM_VALID'|translate}}</span>
                <span *ngIf="isParamsValid==false&&!isParamsCheckGoing&&paramsForm.valid"
                      style="color: #e02200;"> {{'APP_REGION_OPENSTACK_PARAM_INVALID'|translate}}</span>
            </div>
        </form>
    </clr-wizard-page>
    <clr-wizard-page [clrWizardPageNextDisabled]="dtFrom.invalid" #finishPage (clrWizardPageCustomButton)="onSubmit()">
        <ng-template clrPageTitle>{{'APP_REGION_VCENTER_DATACENTER'|translate}}</ng-template>
        <form clrForm #dtFrom='ngForm'>
            <clr-select-container>
                <label>{{'APP_REGION_VCENTER_DATACENTER'|translate}}</label>
                <select clrSelect [(ngModel)]="item.datacenter" name="cloud-region" required>
                    <option value="">{{'APP_DEFAULT_OPTION'|translate}}</option>
                    <option [value]="cRegion" *ngFor="let cRegion of cloudRegions">{{cRegion}}</option>
                </select>
            </clr-select-container>
        </form>
        <ng-template clrPageButtons>
            <clr-wizard-button [type]="'cancel'">{{'APP_CANCEL'|translate}}</clr-wizard-button>
            <clr-wizard-button [type]="'previous'">{{'APP_BACK'|translate}}</clr-wizard-button>
            <clr-wizard-button [type]="'custom-finish'">{{'APP_FINISH'|translate}}</clr-wizard-button>
        </ng-template>
    </clr-wizard-page>
</clr-wizard>



